<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>data与el的2种写法</title>
    <script src="../js/vue.js"></script>
</head>
<body>
<!--
    data 与 el 的2种写法：
        1. el 有2种写法：
            (1). new Vue 时候直接传递 el 属性 —— 常用
            (2). 先 new Vue 再通过 vm.$mount('#root') 指定 el 属性 —— 不常用
        2. data 有2种写法：
            (1). 对象式：非组件化编码时可以写对象，也可以写函数。
            (2). 函数式：组件化编码必须使用函数式的 data。
-->
<div id="root">
    <h2>hello, {{msg}}</h2>
    <h2>地址是：{{address}}</h2>
</div>
<script>
    // el 的第一种写法(常用)
    // new Vue({
    //     el: "#root",
    //     // M model
    //     data: {
    //         msg: '波波米可',
    //         address: '宏福科技园综合楼'
    //     }
    // });

    // el 的第二种写法(不常用)
    // const vm = new Vue({
    //     data: {
    //         msg: '波波米可',
    //         address: '宏福科技园综合楼'
    //     }
    // });
    // vm.$mount('#root');

    // data 的第一种写法(只需要有一个 Vue 实例的时候用的多)
    // new Vue({
    //     el: "#root",
    //     // M model
    //     data: {
    //         msg: '波波米可',
    //         address: '宏福科技园综合楼'
    //     }
    // });

    // data 的第二种写法(data 是一个函数，且要返回对象，组件中必须使用函数式 data)
    new Vue({
        el: '#root',
        /*
         * Vue 中的一个最最重要的原则：
         *      由 Vue 所调用的函数，都不要写成箭头函数，一旦写了箭头函数，this 就不对了(或许是 undefined 或许是 window)
         *
         * 特别注意：
         *      1. data 若使用函数式 data，Vue 会帮我们调用 data 函数，Vue 就会得到返回的数据对象并使用，this 是 Vue 的实例对象
         *      2. data 不要写成箭头函数，要写成普通函数，否则 this 的指向就是 window 了。
         */
        data: function () {
            return {
                msg: '尚硅谷',
                address: '宏福科技园综合楼'
            }
        }
    });

    // Tips：Vue 的严格模式不是全局模式，而是局部的
    // new Vue({
    //     el: '#root',
    //     data: () => {
    //         // Vue 官方不推荐使用箭头函数，这会造成 this 的丢失，丢失之后应该指向 undefined
    //         // 但这里指向 window，这是因为 Vue 的严格模式不是全局模式，照顾不到这里
    //         // 当切换为普通函数的时候，this 才会指向 Vue 实例对象
    //         console.log(this);
    //         return {
    //             msg: '尚硅谷',
    //             address: '宏福科技园综合楼'
    //         }
    //     }
    // });
</script>
</body>
</html>
